@color_gray: #4f4f4f;
@color_icon: #aaa;
@color_orange: #ffc273;
@color_blue: #43D7B5;
@font_size_28: 28;
@font_size_36: 36;
@font_size_45: 45;
@font_size_48: 48;

.index-wrap {
  //background-image: linear-gradient(#fff 0%, #fff 19%, var(--colorGray) 34.5%, var(--colorGray) 100%);
  // background-color: var(--colorGray);
  
  .top {
    width: 100%;
    height: 105rpx;
    display: flex;
    position: fixed;
    z-index: 3;
    background-color: #fff;
    border-bottom: 1rpx solid var(--colorGray);
    border-top: 1rpx solid var(--colorGray);
    
    .scroll-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      white-space: nowrap;
      .navigator {
        padding: 0 30rpx;
        display: inline-block;
        line-height: 105rpx;
        text-align: center;
        font-size: 32rpx;
        color: @color_gray;
        // color: #fff;
        .active {
          font-weight: bold;
          color: var(--colorGray1);
          // color: #fff;
          position: relative;
          &::after {
            display: block;
            content: '';
            width: 32rpx;
            height: 5rpx;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -28rpx;
            background-color: var(--colorGray1);
          }
        }
      }
    }
  }
  .blank {
    height: 104rpx;
  }

  .scroll-view {
    background-color: var(--colorGray);
    .top-msg {
      height: 0rpx;
      text-align: center;
      color: #999;
      transition: height 0.5s;
    }
    .bottom-msg {
      height: 0rpx;
      text-align: center;
      color: #999;
      transition: height 0.5s;
    }
  }

  .shadow {
    width: 100%;
    height: 0;
    box-shadow: 0 0 10px 3px #ccc9;
    position: fixed;
    left: 0;
    bottom: 0;
  }

  //-----------------------
  .add {
    width: 96rpx;
    height: 96rpx;
    position: fixed;
    right: 90rpx;
    bottom: 63rpx;
    // background-color: @color_orange;
    border-radius: 50%;
    // opacity: 0.7;
  }

  .dialog-wrap{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: -50rpx;
    z-index: 3;
    background-color: #00000038;
    .dialog {
      width: 100%;
      background-color: #fff;
      position: fixed;
      left: 0;
      bottom: 0rpx;
      // transition: bottom 0.5s;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;

      &.active {
        bottom: 0;
      }
      .up {
        padding: 21rpx 35rpx;
        line-height: 60rpx;
        color: #666;
        text-align: center;
        .headPic {
          width: 83rpx;
          height: 83rpx;
          border-radius: 15rpx;
          float: left;
          vertical-align: middle;
          background-size: 100% 100%;
        }
        .up-right{
          float: right;
          height: 83rpx;
          width: 580rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .name {
            font-size: (750rpx * 45 / 1070);
            font-weight: bold;
            float: left;
            vertical-align: middle;
          }
          .reNew {
            width: 50rpx;
            height: 50rpx;
            float: right;
            margin-right: 15rpx;
            vertical-align: middle;
            transition: transform 0.5s;
          }
          .change {
            float: right;
            position: absolute;
            right: 120rpx;
            color: #aaa;
          }
        }
      }
      .center {
        padding: 20rpx 0;
        background-color: var(--colorGray);
        display: flex;
        flex-wrap: wrap;
        .item-wrap {
          flex: 0 0 33.33%;
          height: 80rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          .item {
            padding: 0 20rpx;
            height: 48rpx;
            line-height: 42rpx;
            border: 1px solid #999;
            color: @color_blue;
            color: #999;
            border-radius: 30rpx; 
          }
        }
      }
      .blank {
        height: 15rpx;
        background-color: #e6e6e6;
      }
      .bottom {
        color: @color_icon;
        height: 110rpx;
        line-height: 110rpx;
        text-align: center;
        font-size: 34rpx;
      }
    }
  }
  
}